<template>
    <div class="dialog1">
        <el-dialog 
            :title="dialog1.title" 
            :visible.sync="dialog1.show"
            :close-on-click-modal='false'
            :close-on-press-escape='false'
            :modal-append-to-body="false"
            width="30%"
            >
            <div class="form">
                <el-form ref="form" :model="formData" :rules="form_rules" label-width="120px" style="margin:10px;width:auto;">
                    <el-form-item label="旧密码：" prop="oldPassword">
                        <el-input v-model="formData.oldPassword" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码：" prop="newPassword1">
                        <el-input v-model="formData.newPassword1" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码：" prop="newPassword2">
                        <el-input v-model="formData.newPassword2" type="password"></el-input>
                    </el-form-item>
                    
                    <el-form-item  class="text_right">
                        <el-button @click="onCancal()">取消</el-button>
                        <el-button type="primary" @click='onSubmit("form")'>提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import userApi from '../api/user.js'
import {removeUser} from '../utils/auth'
export default {
    name: 'passwordedit-dialog',
    props: {
        dialog1:Object
    },
    data () {
        var validatePass2 = (rule, value, callback) => {
            if (value !== this.formData.newPassword1) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            
            formData:{
                oldPassword:'',
                newPassword1:'',
                newPassword2:''
            },
            form_rules:{
                oldPassword:[
                    { required: true, message: '旧密码不能为空', trigger: 'blur' }
                ],
                 newPassword1:[
                    { required: true, message: '新密码不能为空', trigger: 'blur' },
                    { min: 8, max: 30, message: "长度在 8 到 30 个字符", trigger: "blur" }
                ],
                 newPassword2:[
                    { required: true, message: '确认新密码不能为空', trigger: 'blur' },
                    { min: 8, max: 30, message: "长度在 8 到 30 个字符", trigger: "blur" },
                    { validator: validatePass2, trigger: "blur" }
                ]
            } 
        
        }
    },
    methods: {
        onCancal(){
            //清空表单数据
            this.$refs['form'].resetFields();
            //表单关闭
            this.dialog1.show = false;
        },
        onSubmit(form){
            this.$refs[form].validate(valid => {
                if (valid) {
                    let pojo = {
                    userId:this.$store.getters.user.jti,
                    oldPassword:this.formData.oldPassword,
                    newPassword:this.formData.newPassword1,
                    };

                    userApi.editPassword(pojo).then(res =>{
                        //修改成功之后的处理
                        if(res.data.flag){
                            this.$message({
                            message: "密码修改成功，请重新登录",
                            type: "success"
                            });
                            //清空表单数据
                            this.$refs['form'].resetFields();
                            //表单关闭
                            this.dialog1.show = false;
                            //清除用户信息
                            removeUser();
                            //设置vue store
                            this.$store.dispatch('clearCurrentState');
                            //跳转
                            this.$router.push('/login');
                        }else{
                            this.$message({
                            message: res.data.message,
                            type: "warning"
                            });
                            
                        }
                        
                    });
                }
            });
        }
    }
};
</script>


<style scoed>

</style>

